<template>
    <div class="toast" v-show="isShow">
        <div>{{message}}</div>
    </div>
</template>



<script>
export default {
    name:'Toast',
    props:{
        // message:{
        //     type:String,
        //     default:''
        // },
        // show:{
        //     type:Boolean,
        //     default:false
        // }
    },
    data(){
        return {
            message:'',
            isShow:false
        }
    },
    methods:{
        show(message,duration=2000){
            this.isShow = true
            this.message = message

            setTimeout(() => {
                this.isShow = false
                this.message = ""
            },duration)
        },
        bbb(){
            console.log('22222')
        }
    }
}
</script>



<style scoped>
    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 8px 10px;

        z-index: 99;

        background-color: rgba(0,0,0,.75 );
        border-radius: 5px;
        color: #fff;
    }
</style>